<template>
    <div class="box">
        <h2>智源ai辅助教学系统</h2>
        <ProgressView :index="index"></ProgressView>

        <!-- 输入框 -->
        <div class="input">
      <div style="display: flex;">
        <img style="width: 45px;" src="../../assets/images/jiqiren.png" alt="">
        <textarea v-model="message"
          placeholder="你可以输入主题、科目、教材所属版社、课程内容及其课程内容补充发给我，帮助生成教学大纲，例如二年级语文，人民教育出版社，第一课，小猴教我跳"></textarea>
      </div>
      <div class="button">
        <!-- <el-button @click="isActive = !isActive" round :class="isActive ? 'active' : ''">
          <div>
            <img v-if="!isActive" style="width: 16px;" src="../../assets/images/shengdusikao.png" alt="">
            <img v-else style="width: 16px; height: 16px;" src="../../assets//images/sikao@2x.png" alt="">
            <span :style="{ color: isActive ? '#1890ff' : '#333' }">深度思考</span>
          </div>
        </el-button> -->
        <el-button type="primary" @click="handleClick">
          <div>
            <img style="width: 13px; margin-right: 5px;" src="../../assets/images/fasong.png" alt="">
            <span>发送</span>
          </div>
        </el-button>
      </div>
    </div>
    </div>
</template>
<script setup>
import { onMounted,ref } from 'vue';
import { useRoute,useRouter} from 'vue-router';
import { callDeepSeekAPI } from '../../api/deepseekApi.js';
import ProgressView from '../../components/progressView.vue';
import { useCounterStore } from '../../stores/counter.js';

const store = useCounterStore();
const router=useRouter();
const route = useRoute();
const index = ref(-1);
const message = ref('');

const handleClick = () => {
    console.log("发送", message.value);
    const promptText = `你是一个专业的计算机方面的教学助手，请根据用户输入的内容生成教学目标，用户输入：${message.value}，
      📝 课件目标要求：
1. 严格符合国家课程标准和学生认知特点
2. 目标应涵盖知识、能力、情感态度价值观三个维度
3. 每个目标应具体、可衡量、可达成
4. 设计至少8个教学目标，由浅入深，循序渐进
5. 目标应紧密结合用户提供的教学重点
      请以JSON格式返回结果，格式如下:
      {
        "title": "课程标题",
        "targets": [
          {
            "id": 1,
            "content": "目标1的具体内容"
          },
          {
            "id": 2,
            "content": "目标2的具体内容"
          },
          {
            "id": 3,
            "content": "目标3的具体内容"
          }
        ]
      }只返回JSON格式，不要有其他文字，尽量详细。
      `
    callDeepSeekAPI([
        { role: "system", content: promptText },
        { role: "user", content: message.value }
    ], 'deepseek-chat', false).then((ref) => {
        console.log(JSON.parse(ref.choices[0].message.content));
        // store.data=JSON.parse(ref.choices[0].message.content);
        localStorage.setItem('content',ref.choices[0].message.content)
        router.push({
          path:'/result'
        })
    });
}
onMounted(() => {
    index.value = route.query.type;
    console.log(index.value);
})

</script>

<style scoped>
.box{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.box h2{
    font-size: 28px;
    color: #4078d9;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    z-index: 2;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 150px;
}


.input {
  width: 1024px;
  height: 250px;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  position: relative;
}
.input textarea {
  width: 100%;
  border: none;
  resize: none;
  font-size: 14px;
  outline: none;
  color: #666;
}

.input .button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.robot {
  position: absolute;
  bottom: 143px;
  right: 70px;
}
</style>
